<template>
    <div class="transaction_detail">
        <div class="time_con fs-mini" @click="showCalendar=true">
            <div style="fontWeight:bold" class="flex_start">
                <span style="marginRight: 6px">日期区间</span>
                <van-icon name="arrow-down" />
            </div>
            <div class="color-light">2020.10.01 至 2020.10.31</div>
        </div>

        <div class="con">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="cell in list" :key="cell.id" @click="jumpToDetail">
                    <transactionCell :data="cell"></transactionCell>
                </div>
            </van-list>
        </div>

        <calendar v-model="showCalendar" type="range" :min-date="minDate" @confirm="onConfirm" color="#1989fa" />
    </div>
</template>

<script>
import transactionCell from "@/components/list/transaction-cell";
import { Calendar } from "vant";

export default {

    components: { transactionCell, Calendar },

    data() {
        return {
            showCalendar: false,
            minDate: new Date(2020, 0, 1),
            list: [],
            loading: false,
            finished: false
        };
    },
    methods: {
        // 获取账单列表
        onLoad() {
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    let cell = {
                        id: this.list.length + 1,
                        title: "还款管家转出" + this.list.length + 1,
                        label: "投资理财",
                        price: i & 1 ? "120.00" : "+21.00",
                        status: "处理中",
                        date: new Date()
                    };
                    this.list.push(cell);
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },

        jumpToDetail() {
            console.log("dsad");
            this.$router.push("/billDetail")

        },

        onConfirm(date) {
            this.showCalendar = false;
            const [start, end] = date;
            console.log(this.formatDate(start), this.formatDate(end))
        },

        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
    }
};
</script>

<style lang="scss" scoped>
.transaction_detail {
    width: 100%;

    .time_con {
        padding: 10px;
    }
    .con {
        background-color: #ffffff;
    }
}
</style>